import React, { Component, Fragment } from 'react';
import { Card, Row, Col, Tabs, notification, ConfigProvider } from 'antd';
// import { Tabs } from 'antd-mobile'
import styles from './InterviewResult.less';
import { authorityControl, listSort } from '@/utils/utils';
import PublicUtils from "@/utils/publicUtils";
import request from '@/utils/request'
import moment from 'moment'
import {
  RightOutlined
} from '@ant-design/icons';
import { InfiniteScroll } from 'antd-mobile';
import { history } from 'umi';

export default class InterviewResult extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      hasMore: true,
      activeKey: '',
      tabList: [],
      formArgument: {
        sort: 'desc',
        sortType: 'appointmentTime',
      },
      total: 0,
      pageNum: 1,
      pageSize: 20,
      interviewData: [],
    };
  }


  componentDidMount() {
    this.tabPermission();
  }

  // 面试结果
  getLInterviewResultList = async () => {
    const { pageNum, pageSize, formArgument, activeKey, interviewData } = this.state;
    this.setState({ loading: true });
    let data = {
      pageNum,
      pageSize,
      staffSource: 1,
      ...formArgument,
      status: activeKey
    }
    const baseUrl = {
      '0': '/staff/onboardingManagement',
      '1': '/staff/onboardingManagementSuccess',
      '2': '/staff/onboardingManagementFail',
    }[activeKey] || '';
    const res = baseUrl ? await request.post(baseUrl, {
      data
    }) : '';
    if (res && res.error_code === 200) {
      // 页数相同，直接替换
      if (res.data.current == 1) {
        this.setState({
          interviewData: res.data ? res.data.records : [],
          total: res.data ? res.data.total : 0,
          loading: false,
          pageNum: pageNum,
          hasMore: true,
          state: activeKey
        })
      } else {
        const newData = res.data ? res.data.records : [];
        if (res.data.current > res.data.pages) {
          this.setState({ hasMore: false, loading: false });
          return;
        }

        this.setState({
          interviewData: [
            ...interviewData, // 将新获取的数据添加到已有的数据列表后面
            ...newData
          ],
          total: res.data ? res.data.total : 0,
          loading: false,
          pageNum: pageNum,
          state: activeKey
        })
      }
      // const result = !res.data ? {} : res.data;
      // this.setState({
      //   interviewData: result.records,
      //   total: result.total,
      //   // state: activeKey
      // })
    } else {
      notification.error({
        message: res ? res.error_msg : '请求错误'
      })
      this.setState({ hasMore: false});
    }
    this.setState({ loading: false });
  }

  detail = (item) => {
    const{activeKey}= this.state;
    const staffId = item.staffId;
    if(activeKey == 0 && PublicUtils.checkAuth('2020598_PERMS')){
      history.push('/recruit/interviewResultMobilePendingDetail/' + staffId+'?staffId=' + staffId)
    }else if(activeKey == 1&&PublicUtils.checkAuth('2020601_PERMS')){
      history.push('/recruit/interviewResultMobileAlreadyDetail/' + staffId+'?staffId=' + staffId)
    }else if(activeKey == 2 &&PublicUtils.checkAuth('2020602_PERMS')){
      history.push('/recruit/interviewResultMobileFailDetail/' + staffId+'?staffId=' + staffId)
    }
    
  }


  tabPermission = () => {
    let list = [
      {
        key: '0',
        tab: '待入职',
        type: PublicUtils.checkAuth("2020594_PERMS")
      },
      {
        key: '1',
        tab: '已入职',
        type: PublicUtils.checkAuth("2020595_PERMS")
      },
      {
        key: '2',
        tab: '入职失败',
        type: PublicUtils.checkAuth("2020596_PERMS")
      }
    ];
    this.setState({
      tabList: authorityControl(list, false)
    })
    authorityControl(list, true) && this.onTabChange(authorityControl(list, true));
  }

  // tab切换
  onTabChange = (activeKey) => {
    this.setState({
      activeKey,
      pageNum: 1,
      interviewData: [],
    }, () => {
      this.getLInterviewResultList();
    })
  }

  loadMore = () => {
    const { hasMore, loading, pageNum } = this.state;
    if (!loading && hasMore) {
      this.setState({ loading: true, pageNum: pageNum + 1 }, () => {
        this.getLInterviewResultList()
      })

    }
  }


  render() {

    const {
      tabList,
      activeKey,
      interviewData,
      hasMore
    } = this.state;

    return (
      <div className={styles.contions}>
        <div className={styles.tabsContainer}>
          <ConfigProvider
            theme={{
              components: {
                Tabs: {
                }
              }
            }}
          >
            <Tabs
              activeKey={activeKey}
              onChange={this.onTabChange}
              items={tabList}
              className={styles.tabs}
              type="card"
              size="large"
              centered
              tabBarGutter={40}
              tabBarStyle={{
                width: '100%',
                height: '60px',
                fontSize: '22px',
                borderTop: '2px solid #e8e8e8',
                borderBottom: '2px solid #e8e8e8'
              }}
            >
            </Tabs>
          </ConfigProvider>
        </div>
        <div className={styles.content}>
          {interviewData.map((item) => (
            <div className={
              activeKey === '0'
                ? `${styles.Card} ${styles.yellow}`
                : activeKey === '1'
                  ? `${styles.Card} ${styles.green}`
                  : activeKey === '2'
                    ? `${styles.Card} ${styles.gray}`
                    : styles.Card}>
              <Row style={{ marginTop: '5px' }}>
                <Col span={10} className={styles.nameStyle}>{item?.staffName}</Col>
                <Col span={9} style={{ color: '#333333' }}>{item?.staffJobName}{' / '+item?.levelName}</Col>
                <Col span={5} className={styles.iconStyle} ><RightOutlined size="20px" onClick={() => this.detail(item)} /></Col>
              </Row>
              <Row style={{ marginTop: '5px' }}>
                <Col span={12}>手机号：<span style={{ color: '#333333' }}>{item?.phoneNum}</span></Col>
                <Col span={12}>员工类别：<span style={{ color: '#333333' }}>{PublicUtils.getStaffType(item?.staffType)}</span></Col>
              </Row>
              <Row style={{ marginTop: '5px' }}>
                <Col span={12}>招聘负责人：<span style={{ color: '#333333' }}>{item?.recruitName}</span></Col>
                <Col span={12}>直属上级：<span style={{ color: '#333333' }}>{item?.leaderName}</span></Col>
              </Row>
              <Row style={{ marginTop: '5px' }}>
                <Col span={12}>部门：<span style={{ color: '#333333' }}>{item?.deptName}</span></Col>
                <Col span={12}>约定入职日期：<span style={{ color: '#333333' }}>{item?.appointmentTime ? moment(item?.appointmentTime).format('YYYY-MM-DD') : '-'}</span></Col>
              </Row>
            </div>
          ))}
          <InfiniteScroll loadMore={this.loadMore} hasMore={hasMore} />
        </div>

      </div >
    );
  };
}
